<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ThinkPHP5.0</title>

    <meta name="description" content="Dashboard">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--Basic Styles-->
    <link href="__STATIC__/style/bootstrap.css" rel="stylesheet">
    <link href="__STATIC__/style/font-awesome.css" rel="stylesheet">
    <link href="__STATIC__/style/weather-icons.css" rel="stylesheet">

    <!--Beyond styles-->
    <link id="beyond-link" href="__STATIC__/style/beyond.css" rel="stylesheet" type="text/css">
    <link href="__STATIC__/style/demo.css" rel="stylesheet">
    <link href="__STATIC__/style/typicons.css" rel="stylesheet">
    <link href="__STATIC__/style/animate.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/plus/layer/layer.js"></script>
<style>
.open{
    border: 1px solid #ccc;
padding: 0 3px 0 3px;
cursor: pointer;
}
</style>
</head>

<body>
    <!-- 头部 -->
    {include file="common/head"}

    <!-- /头部 -->

    <div class="main-container container-fluid">
        <div class="page-container">
            <!-- Page Sidebar -->
            <div class="page-sidebar" id="sidebar">
                <!-- Page Sidebar Header-->
                <div class="sidebar-header-wrapper">
                    <input class="searchinput" type="text">
                    <i class="searchicon fa fa-search"></i>
                    <div class="searchhelper">Search Reports, Charts, Emails or Notifications</div>
                </div>
                <!-- /Page Sidebar Header -->
                <!-- Sidebar Menu -->
                {include file="common/left"}
                <!-- /Sidebar Menu -->
            </div>
            <!-- /Page Sidebar -->
            <!-- Page Content -->
            <div class="page-content">
                <!-- Page Breadcrumb -->
                <div class="page-breadcrumbs">
                    <ul class="breadcrumb">
                        <li class="active">

                            <i class="fa fa-home"></i>
                            <a href="#">
                                栏目管理
                            </a>
                        </li>
                        <li>栏目列表</li>
                    </ul>

                </div>
                <!-- /Page Breadcrumb -->

<!-- Page Body -->
<div class="page-body">

<button type="button" tooltip="添加栏目" class="btn btn-sm btn-azure btn-addon"
onclick="javascript:window.location.href = '{:url('admin/cate/create')}'"> <i
class="fa fa-plus"></i> Add
</button>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
<div class="widget">
<div class="widget-body">
<div class="flip-scroll">
 <form method="post" action="{:url('cate/sort')}" >
<table class="table table-bordered table-hover">
    <thead class="">
        <tr pid="0">
            <th class="text-center" width="6%">伸缩</th>
            <!-- <th class="text-center" width="6%">
                <label>
                    <input id="checkall" class="colored-blue"
                        type="checkbox" >
                    <span class="text"></span>
                </label>
            </th> -->
            <th class="text-center" width="8%">ID</th>
            <th>栏目</th>
            <th class="text-center" width="10%">状态</th>
            <th class="text-center" width="10%">属性</th>
            <th class="text-center" width="10%">所属模型</th>
            <th class="text-center" width="2%">排序</th>
            <th class="text-center" width="8%">操作</th>
        </tr>
    </thead>
    <tbody>

        {volist name="cate" id="vo"}
        <tr id="{$vo.id}" pid="{$vo.pid}">
            <td align="center"><span class="open">+</span></td>
            <!-- <td align="center">
                <label><input name="itm[]" class="colored-blue" value="{$vo.id}" type="checkbox">
                    <span class="text"></span></label>
            </td> -->
            <td align="center">{$vo.id}</td>
            <td class="c10"><span class="fh"></span><span></span>
                <a href="{:url('content/index',array('cid'=>$vo.id,'model_id'=>$vo.model_id))}" class="cate" pid="{$vo.pid}"><b>{$vo.catename}</b></a>
                
            </td>
            <td align="center">
                <a cateid="{$vo.id}" onclick="changestatus(this);"
                    class="btn {if condition="$vo.isshow eq 1"}btn-success {else}btn-warning {/if} btn-sm shiny">{if condition="$vo.isshow eq 1"}显示{else}隐藏{/if}</a>
            </td>
            <td align="center">{$vo.type}</td>
            <td align="center">{$vo.model}</td>
            <td align="center"><input name="sort[{$vo.id}]"
                    style="width:50px; text-align:center;" type="text"
                    value="{$vo.sort}" ></td>
            <td align="center">
                    <a 
                    class="btn btn-sm  shiny btn-purple "
                    href="{:url('admin/cate/create',array('id'=>$vo.id))}" title="添加子栏目"><i class="fa fa-plus"></i></a>
                <a href="{:url('admin/cate/edit',array('id'=>$vo.id))}" class="btn btn-primary btn-sm shiny" title="编辑">
                    <i class="fa fa-edit"></i> 
                </a>
                <a href="javascript:;" onclick="del(this)"
                    class="btn btn-danger btn-sm shiny del" title="删除" id="{$vo.id}">
                    <i class="fa fa-trash-o"></i> 
                </a>
            </td>
        </tr>
      {/volist}
      <tr pid="0" >
            <td colspan="6" ></td>
            <td align="center">
                <button class="btn btn-default" type="submit">更新排序</button>
            </td>
        </tr>
    </tbody>
</table>
</form>
</div>
<div>
</div>
</div>
</div>
</div>
</div>

</div>

</div>
            <!-- /Page Body -->
        </div>
        <!-- /Page Content -->
    </div>
    </div>

    <!--Basic Scripts-->
    <script src="__STATIC__/style/jquery_002.js"></script>
    <script src="__STATIC__/style/bootstrap.js"></script>
    <script src="__STATIC__/style/jquery.js"></script>
    <!--Beyond Scripts-->
    <script src="__STATIC__/style/beyond.js"></script>
<script>
    $(function(){

    // 隐藏非顶级栏目栏目伸缩
        $('tr[pid!=0]').hide();
        // 子栏目展开
        $(".open").click(function(){
            var flag=$(this).text();
            var index=$(this).parents('tr').attr('id');
            if(flag=="+"){
                $(this).text('-');
                //展开子栏目录
                $('tr[pid='+index+']').fadeIn('slow');
            }else{
                $(this).text('+');
                // 隐藏子栏目
                hidecate(index);
            }
        });
      
    });
     //全选处理
     $("#checkall").click(function(){
        $("[type=checkbox]:checkbox").each(function() {
            this.checked = !this.checked;
            
        });
        
     });
    //  删除
    function del(o){
        var id=$(o).attr('id');
        $.post("{:url('admin/cate/delete')}",{id:id},function(res){

            if(res.code==1){
            layer.msg(res.msg,{time:1000,icon:1},function () {
                            location.reload();
            });
            }else{
            layer.msg(res.msg,{icon:2,time:2000});  
            }
            });
    }
    //  获取选择的值
    $(".chooseFruit").click(function(){
				var arr = new Array();
				$("type=checkbox]:checkbox").each(function(i){
					arr[i] = $(this).val();
				});
		    var vals = arr.join(",");
	        console.log(vals);
	});
     layui.use('layer', function(){
        var layer = layui.layer;
     });
    //  改变栏目状态
    function changestatus(o){
        var cateid=$(o).attr('cateid');
        $.post("{:url('admin/cate/status')}",{id:cateid},function(res){

           if(res.code==1){
            layer.msg(res.msg,{time:1000,icon:1},function () {
                            location.reload();
            });
           }else{
            layer.msg(res.msg,{icon:2,time:2000});  
           }
        });
    }
   
   
// 隐藏子栏目
function hidecate(pid){
    $('tr[pid='+pid+']').each(function(){
        hidecate($(this).attr('id'));
    })
    $('tr[pid='+pid+']').fadeOut('slow');
    $('tr[pid='+pid+']').find('.open').text('+');
}
</script>


</body>

</html>